<template>
	<view class="container">
		<view class="empty" v-if="goods.length == 0">
			<image src="@/static/image/empty.png" mode="widthFix"></image>
			<view class="text">暂无商品</view>
		</view>
		<view class="goodsList">
			<view class="goodsItem" v-for="(good, g) in goods" :key="g" @click="routerGoods(good)">
				<image :src="domain+good.goods_image" mode="aspectFill" class="img"></image>
				<view class="name nobr">{{good.name}}</view>
				<view class="price flex"><text>￥</text>{{good.price}}</view>
				<view class="oper">
					<view class="item flex-cc" @click.stop="updateGoods(good.id)">编辑</view>
					<view class="item flex-cc" @click.stop="goodsUpDown(good)">{{good.is_show==1?'下':'上'}}架</view>
				</view>
			</view>
		</view>
		<button class="primary" @click="updateGoods(0)">上传商品</button>
	</view>
</template>

<script>
	import common from '@/static/js/common.js';
	export default {
		data() {
			return {
				domain: getApp().globalData.DOMAIN,
				goods: [],
			}
		},
		onShow() {
			this.getGoodsInfo()
		},
		methods: {
			getGoodsInfo() {
				let that = this;
				common.api({
					method: 'GET',
					url: '/mobile/index/userGoodsList',
					success:(res) => {
						if (res.code != 0) {
							uni.showToast({ title: res.msg, icon: 'none' });
							return false;
						}
						that.goods = res.data
					}
				});
			},
			goodsUpDown(item) {
				let that = this
				uni.showModal({
					title: '温馨提示',
					content: '您确认'+(item.is_show==1?'下':'上')+'架当前商品',
					confirmText: '确认'+(item.is_show==1?'下':'上')+'架',
					success: function (res) {
						if (res.confirm) {
							common.api({
								method: 'POST',
								url: '/mobile/index/userGoodsRemove',
								data: {
									id: item.id,
									is_show: (item.is_show==1?0:1)
								},
								success:(res) => {
									if (res.code != 0) {
										uni.showToast({ title: res.msg, icon: 'none' });
										return false;
									}
									item.is_show = (item.is_show==1?0:1)
									uni.showToast({ title: (item.is_show==1?'下':'上')+'架成功', icon: 'none' });
								}
							});
						}
					}
				});
			},
			routerGoods(item) {
				uni.navigateTo({url:'/pages/index/goods?id='+item.id+'&t=my'})
			},
			updateGoods(id) {
				uni.navigateTo({url:'/pages/other/goodsupdate?id='+id})
			}
		}
	}
</script>

<style scoped lang="less">
	.goodsList {
		padding: 30rpx 3vw;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		.goodsItem {
			width: 45vw;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			overflow: hidden;
			box-shadow: 0 0 10rpx rgba(0,0,0,.1);
			&:nth-of-type(2n) {
				margin-left: 4vw;
			}
			.img {
				display: block;
				width: 45vw;
				height: 45vw;
				background-color: gainsboro;
			}
			.name {
				padding: 10rpx 20rpx;
			}
			.price {
				color: red;
				padding: 0 20rpx 10rpx;
				font-size: 36rpx;
				align-items: baseline;
				text {
					font-size: 26rpx;
				}
			}
			.oper {
				padding: 10rpx 0;
				display: flex;
				align-items: center;
				border-top: 2rpx solid #eee;
				background-color: #eee;
				.item {
					width: 50%;
					line-height: 50rpx;
					&+.item {
						border-left: 2rpx solid #ccc;
					}
				}
			}
		}
	}
	.primary {
		width: 80vw;
	}
</style>
